<template>
	<div>
		<!-- 面包屑导航 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/' }">活动</el-breadcrumb-item>
			<el-breadcrumb-item>操作日志</el-breadcrumb-item>
		</el-breadcrumb>
		<el-card>
			<div slot="header">
				<!-- 查询表单 -->
				<el-form :inline="true" >
					<el-form-item label="操作人员">
						<el-input v-model="searchForm.loginName" placeholder="用户名"></el-input>
					</el-form-item>
					<el-form-item label="操作日期">
						<el-date-picker v-model="searchForm.loginTime" type="date" placeholder="请选择日期" value-format="yyyy-MM-dd"></el-date-picker>
					</el-form-item>
					<el-button type="primary" @click="search">查询</el-button>
				</el-form>
			</div>
			<el-table :data="tableData" border>
				<el-table-column label="编号" prop="id" align="center"></el-table-column>
				<el-table-column label="操作者" prop="loginName" align="center"></el-table-column>
				<el-table-column label="操作日期" prop="loginTime" align="center" >
					<template slot-scope="scope">
						{{scope.row.loginTime|dateFormat}}
					</template>
				</el-table-column>
				<el-table-column label="ip地址" prop="ip" align="center"></el-table-column>
			</el-table>
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="page"
				:page-sizes="[5,10,15,20]"
				:page-size="size"
				layout="total, sizes, prev, pager, next, jumper"
				:total="this.total"
			></el-pagination>
		</el-card>
	</div>
</template>

<script>
export default {
	data() {
    
		return {
			tableData: [],
			searchForm: {},
			loginTime: "",
      page:1,
      size:10,
      total:0,
      
		}
	},
	methods: {
		async getLogin() {
			const { data: res } =await this.$http.post(
				`system/loginLog/findPage?page=${this.page}&size=${this.size}`,
				this.searchForm
			)
			if (res.data!==null) {
				this.$message.success("查询成功")
        this.tableData = res.rows
        this.total=res.total
			}
    },
    handleSizeChange(val){
      this.size=val;
      this.getLogin();
    },
    handleCurrentChange(val){
      this.page=val;
      this.getLogin();
    },
    search(){
      this.getLogin();
    },
    renderTime(date){
        var dateee = new Date(date).toJSON();
        return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
      },
  },
  created(){
    this.getLogin();
  }
}
</script>

<style>
</style>